import './index.scss'
import { Swiper, DotLoading, Image } from 'antd-mobile'
// import { SwiperRef } from 'antd-mobile/es/components/swiper'
import { useBanner } from './useBanner'
import { useEffect } from 'react'
// import HomeList from './HomeList'
const Bannner = () => {
    // 逻辑业务
    const { banners, isLoading } = useBanner()
    // 动态 prefetch 下一张 banner 图片
    useEffect(() => {
      if (!isLoading && banners.length > 1) {
        const link = document.createElement('link')
        link.rel = 'prefetch'
        link.as = 'image'
        link.href = banners[1].banner
        document.head.appendChild(link)
      }
    }, [isLoading, banners])
    // UI 渲染
    return (
      <div>
        {isLoading? <div className='content-box'><span>Loading</span><DotLoading /></div>:
          <div>
            <Swiper autoplay>
              <Swiper.Item key="1">
                {/* <img src="" alt="banner" /> */}
                {banners.map((item, index) => (
                  <a href={item.href} key={item.id}>
                    {/* {index === 0 ? <img src={item.banner} alt="banner" className='bannerImg' /> :
                    <img src={item.banner} alt="banner" className='bannerImg' />} */}
                    {/* <img 
                      src={item.banner} 
                      alt={item.alt}
                      loading={index === 0 ? "eager" : 'lazy'} 
                      className='bannerImg' 
                    /> */}
                    <Image loading={index === 0 ? "eager" : 'lazy'} src={item.banner} alt={item.alt}  fit='cover' className='bannerImg' />
                  </a>
                ))}
              </Swiper.Item>
            </Swiper>
          </div>
        }

      </div>
    )
  }
  
  export default Bannner
  